<template>
    <el-form
        ref="form"
        class="page-form"
        :class="className"
        :model="data"
        :rules="rules"
        :size="size"
        :disabled="disabled"
        :label-width="labelWidth"
        label-position="left"
    >
        <el-form-item
            v-for="(item, index) in getConfigList()"
            :key="index"
            :prop="item.value"
            :label="item.label"
            v-show="!item.hidden"
            :class="item.className"
            :label-width="item.labelWidth"

        >
            <template v-if="item.type === 'slot'">
                <slot :name="'form-' + item.value" />
            </template>
            <el-input
                v-if="item.type === 'input' || item.type === 'password'"
                v-model="data[item.value]"
                :style="{width:item.width+'px'}"
                :type="item.type"
                :disabled="item.disabled"
                :placeholder="getPlaceholder(item)"
                @focus="handleEvent(item.event)"
                @change="handleEventChange(item.event,data[item.value])"
            />
            <el-input
                v-if="item.type === 'textarea'"
                v-model="data[item.value]"
                :type="item.type"
                :disabled="item.disabled"
                :placeholder="getPlaceholder(item)"
                :autosize="item.autosize || {minRows: 2, maxRows: 10}"
                @focus="handleEvent(item.event)"
            />
            <el-radio-group
                v-if="item.type === 'radio'"
                v-model="data[item.value]"
                @change="handleEvent(item.event,data[item.value])"
            >
                <el-radio
                    v-for="childItem in listTypeInfo[item.list]"
                    :value="childItem.value+''"
                    :key="childItem.value"
                >{{childItem.label}}</el-radio>
            </el-radio-group>
            <el-input-number
                v-if="item.type === 'inputNumber'"
                v-model="data[item.value]"
                size="small"
                :style="item.style"
                :min="item.min"
                :max="item.max"
                :step-strictly="item.stepStrictly"
                :controls-position="item.controlsPosition"
                @change="handleEvent(item.event)"
            />
            <el-select
                v-if="item.type === 'select'"
                v-model="data[item.value]"
                :style="{width:item.width+'px'}"
                :disabled="item.disabled"
                :clearable="item.clearable"
                :filterable="item.filterable"
                :placeholder="getPlaceholder(item)"
                @change="handleEvent(item.event, data[item.value])"
            >
                <el-option
                    v-for="childItem in listTypeInfo[item.list]"
                    :key="childItem.value"
                    :label="childItem.label"
                    :value="childItem.value"
                />
            </el-select>
            <el-select
                v-if="item.type === 'remoteSelect'"
                v-model="data[item.value]"
                :style="{width:item.width+'px'}"
                :disabled="item.disabled"
                :clearable="item.clearable"
                :multiple="item.multiple"
                filterable
                remote
                :remote-method="(query) => remoteMethod(item.event, query, item)"
                :loading="item.loading"
                :placeholder="getPlaceholder(item)"
                @change="handleRemoteSelectEvent(item.value, data[item.value], item.dataObj)"
            >
                <el-option
                    v-for="childItem in listTypeInfo[item.list]"
                    :key="childItem.value"
                    :label="childItem.label"
                    :value="childItem.value"
                />
            </el-select>
            <el-cascader
                v-if="item.type === 'cascader'"
                :style="{width:item.width+'px'}"
                v-model="data[item.value]"
                :options="listTypeInfo[item.list]"
                :props="item.props"
                :filterable="item.filterable"
                :placeholder="getPlaceholder(item)"
                :clearable="item.clearable"
                @change="handleEvent(item.event, data)"
            ></el-cascader>
            <el-date-picker
                v-if="item.type === 'date'"
                v-model="data[item.value]"
                :style="{width:item.width+'px'}"
                :type="item.dateType"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="item.TimePickerOptions"
                :clearable="item.clearable"
                :disabled="item.disabled"
                :placeholder="getPlaceholder(item)"
                @focus="handleEvent(item.event)"
            />
            <el-tag
                v-if="item.type === 'tag'"
            >{{ $fn.getDataName({dataList: listTypeInfo[item.list], value: 'value', label: 'key', data: data[item.value]}) || '-' }}</el-tag>
            <template v-if="item.slot">
                <slot :name="'form-item-' + item.value" />
            </template>
        </el-form-item>
    </el-form>
</template>
  
  <script setup>
const { proxy } = getCurrentInstance();
const emit = defineEmits(['handleEvent', 'handleEventChange', 'handleRemoteSelectEvent', 'handleClick', 'remoteMethod','update:refObj'])
const props = defineProps({
    className: {
        type: String
    },
    data: {
        type: Object
    },
    size: {
        type: String,
        default: 'small'
    },
    fieldList: {
        type: Array
    },
    rules: {
        type: Object
    },
    listTypeInfo: {
        type: Object
    },
    labelWidth: {
        type: String,
        default: '120px'
    },
    refObj: {
        type: Object
    },
    disabled: {
        type: Boolean,
        default: false
    }
})
const form = ref()
function getConfigList () {
    return props.fieldList.filter(item => !Object.prototype.hasOwnProperty.call(item, 'show') || (Object.prototype.hasOwnProperty.call(item, 'show') && item.show))
}
function getPlaceholder (row) {
    let placeholder = row.placeholder
    if (row.type === 'input' || row.type === 'textarea') {
    } else if (row.type === 'select' || row.type === 'time' || row.type === 'date' || row.type === 'cascader') {
    } else if (row.type === 'remoteSelect') {
    } else {
        placeholder = row.label
    }
    return placeholder
}
function handleEvent (evnet, data) {
    emit('handleEvent', evnet, data)
}
function handleEventChange (evnet, data) {
    emit('handleEventChange', evnet, data)
}
function handleRemoteSelectEvent (key, value, obj) {
    emit('handleRemoteSelectEvent', key, value, obj)
}
function handleClick (event, data) {
    emit('handleClick', event, data)
}
function remoteMethod (event, query, item) {
    emit('remoteMethod', event, query, item)
}
watchEffect(() => {
    emit('update:refObj', form)
})

  </script>
  
  <style lang="scss" scoped>
.report-media-page-form {
    @media only screen and (min-width: 0px) {
        .el-form-item {
            display: inline-block;
            width: 100%;
        }
    }
    @media only screen and (min-width: 1000px) {
        .el-form-item {
            display: inline-block;
            width: 50%;
        }
    }
    @media only screen and (min-width: 1450px) {
        .el-form-item {
            display: inline-block;
            width: 33.33%;
        }
    }
    // @media only screen
    // and (min-width : 1600px) {
    //   .el-form-item{
    //     display: inline-block;
    //     width: 25%;
    //   }
    // }
}
</style>
  